<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
       title="详情" 
       left-arrow
       @click-left="$router.go(-1)">
          <van-icon slot="right" name="weapp-nav"/>
      </van-nav-bar>
    </header>
    <div class="content">
      <div class="detailbanner">
        <van-image width="300" height="400" :src="proimg" />
      </div>
      <div class="detailinfo">
        <span>￥{{price}}</span>
        <h2>{{proname}}</h2>
        <p>{{desc}}</p>
      </div>
      <div>
        <van-goods-action>
          <van-goods-action-icon icon="chat-o" text="客服" color="#07c160" />
          <van-goods-action-icon icon="cart-o" text="购物车" @click="$router.push('/cart')"/>
          <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
          <van-goods-action-button @click="addCart" type="warning" text="加入购物车" />
          <van-goods-action-button type="danger" text="立即购买" />
        </van-goods-action>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { NavBar,Icon,Image,GoodsAction, GoodsActionIcon, GoodsActionButton,Toast } from 'vant'
import { getDetail,addCart,YdeleteData } from '@/api'

Vue.use(Image)
Vue.use(NavBar)
Vue.use(Icon)
Vue.use(Toast)
Vue.use(GoodsAction)
Vue.use(GoodsActionIcon)
Vue.use(GoodsActionButton)
export default {
  data () {
    return {
      brand: "",
      desc: '',
      detail:'',
      price: 0,
      proid: '',
      proimg: '',
      rating: 0,
      proname:'',
      sales: 0,
      stock: 0,
      type: ''
    }
  },
  //钩子函数用来请求数据
  mounted () {
    const { proid } = this.$route.params 
    //请求详情页数据
    getDetail({proid}).then(res => {
      const {brand,desc,detail,price,proid,proimg,rating,sales,stock,type,proname} = res.data.data
      this.brand = brand
      this.desc = desc
      this.detail = detail
      this.price = price
      this.proid = proid
      this.proimg = proimg
      this.rating = rating
      this.sales = sales
      this.proname = proname
      this.stock = stock
      this.type = type
    // console.log(res.data.data)
    })
  },
  //methods自定义函数
  methods: {
    //加入购物车,需要判断是否是登录状态
    addCart () {
      if(localStorage.getItem('loginState')==='ok'){
      console.log('加入购物车')
        addCart({
          userid: localStorage.getItem('userid'),
          proid: this.proid,
          num: 1
        }).then(res => {
          console.log(res)
          const { code } = res.data
          if(code==='200'){
            Toast('加入购物车成功')
          }else if (code == '10101'){
            Toast('加入失败')
          }
        })
      }else{
        this.$router.replace('/user')
      }
    }
  },
}
</script>
<style lang='scss' scoped>
.content{
  padding: 10px;
  .detailbanner{
    margin-left:7.5%;
  }
  .detailinfo{
    span{
      font-size: 18px;
      color: #f66;
    }
    h2{
      font-size: 20px;
    }
    p{
      margin-top: 10px;
      font-size: 15px;
    }
  }

}
</style>